<template>
  <div class="page pa-4">
    <section v-for="(item, index) in calcOrderDetailConfig" :key="item.key" class="item rounded-md-l pa-4 mb-3">
      <header class="font-lg font-weight-bold">
        <span> {{ item.title }}</span>
        <span v-if="index === 0" class="float-right" :style="{ color: righTextColor(item.content[0].value) }">
          {{ item.content[0].value | formatOrderStatus }}
        </span>
      </header>
      <div class="content">
        <div v-for="val in item.content" v-show="val.code !== 'subscribeStatus'" :key="val.code" class="mt-3">
          <span v-if="val.label" class="content-item-label d-inline-block text-justify">{{ val.label }}</span>
          <!-- 使用特定样式使两个字与三个字一样框，所以需要单独写冒号 -->
          <span v-if="val.label">：</span>
          <span v-if="val.key === 'filter'">{{ val.value | formatAll }}</span>
          <span v-else>{{ val.value }}</span>
        </div>
        <div
          v-if="item.key === 'image' && (detail.subscribeType === 10703 || detail.subscribeType === 10704)"
          class="mt-3"
        >
          <van-uploader v-if="item.content.length" v-model="item.content" :deletable="false" :show-upload="false" />
          <div v-else>未上传图片</div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { formatOrderStatusSpecial, formatSubscribeTypeSpecial } from '@/filters';
import { formatTime } from '@/utils';
import moment from 'moment';
import { orderDetailConfig } from './utils/config';

export default {
  name: '',
  components: {},
  filter: {},
  mixins: {},
  props: {},
  head() {
    return {
      title: '申请单详情',
    };
  },
  async asyncData({ $lvtongApis, query }) {
    const { subscribeId } = query;
    const { provinceName, cityName, districtName, ...detail } = await $lvtongApis
      .getSubscribeDetail(subscribeId)()
      .then(({ data }) => data);
    const area = provinceName + ' ' + cityName + ' ' + districtName;
    detail.area = area;
    if (detail.subscribeDateAffirm) {
      const showAm = moment(detail.subscribeDateAffirm).hour() < 12;
      detail.subscribeDateAffirm = formatTime(detail.subscribeDateAffirm) + (showAm ? ' 上午' : ' 下午');
    }
    detail.subscribeDateLatest = formatTime(detail.subscribeDateLatest);
    detail.subscribeDateEarliest = formatTime(detail.subscribeDateEarliest);
    return { detail };
  },
  data() {
    return {
      detail: {},
    };
  },
  computed: {
    righTextColor() {
      return (status) => {
        return formatOrderStatusSpecial(status).righTextColor;
      };
    },
    calcOrderDetailConfig() {
      const { subscribeType, fileUrl } = this.detail;
      const middleConfig = orderDetailConfig.map((item) => {
        if (item.key === 'serviceInfo') {
          return {
            ...item,
            content: item.content.concat(formatSubscribeTypeSpecial(subscribeType).extra),
          };
        } else if (item.key === 'image') {
          return {
            ...item,
            content: fileUrl
              ? fileUrl.split(',').map((item) => {
                  return {
                    url: item,
                  };
                })
              : [],
          };
        } else {
          return item;
        }
      });
      middleConfig.forEach((item) => {
        item.content.forEach((val) => {
          val.value = this.detail[val.code];
        });
      });
      return middleConfig;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="less">
.page {
  .item {
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
    background-color: #fff;
    header {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        left: -16px;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 5px;
        height: 16px;
        background: @primary-color;
      }
    }
    .content {
      &-item {
        &-label {
          min-width: 70px;
          float: left;
          height: 14px;
          &::after {
            content: '';
            width: 100%;
            display: inline-block;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
